@import './lib/reset.scss';
* { touch-action: none }
html, body, #root {
  @include rect(100%, 100%);
}
.container {
  @include rect(100%, 100%);
  @include flexbox();
  @include flex-direction(column);
  .box {
    @include flex();
    @include rect(100%, auto);
    @include overflow(auto); // 部分浏览器需要加
    @include flexbox();
    @include flex-direction(column);
    .header {
      @include rect(100%, 0.44rem);
      @include background-color(#f66);
      @include color(#fff);
      @include font-size(18px);
    }
    .content {
      @include flex();
      @include rect(100%, auto);
      @include overflow(auto);
    }
  }
  .footer {
    @include rect(100%, 0.5rem);
    @include background-color(#efefef);
    ul {
      @include rect(100%, 100%);
      @include flexbox();
      a {
        @include display(block);
        @include color(#333);
        @include flex(); // flex: 1;
        @include rect(auto, 100%);
        // 水平垂直居中
        @include flexbox();
        @include flex-direction(column);
        @include justify-content();
        @include align-items();

        &.active {
          @include color(#f66);
        }

        span {
          @include font-size(22px);
        }
        p {
          @include font-size(12px);
        }
      }
    }
  }
}
.prolist {
  @include clearfix();
  .proitem {
    @include rect(100%, 1rem);
    // 实现真正的1px的下边框 - 1个物理像素
    // 面试高频问题 css像素  物理像素 屏幕分辨率
    @include border(0 0 1px 0, #ccc, solid);
    @include flexbox();
    @include box-sizing(border-box);
    .itemimg {
      @include rect(1rem, 1rem);
      img {
        @include rect(0.9rem, 0.9rem);
        @include display(block);
        @include border(1px, #ccc, solid);
        @include margin(0.05rem);
        @include box-sizing(border-box);
      }
    }
    .iteminfo {
      @include flex();
      @include padding(0.06rem 0.05rem);
      .desc {
        @include ellipsis(100%, 1);
      }
    }
    .hot {
      @include fullscreen(999);
      @include font-size(28px);
      @include color(#f66);
    }
    &.hotitem {
      // 因为我们采用的是scss库，包含兼容写法，写取消flex布局，然后再添加浮动
      @include clearfix();
      @include float(left);
      @include border(1px, #ccc, solid);
      @include flex-direction(column);
      @include rect(22%, auto);
      @include margin(0 2px);
      .itemimg {
        @include rect(100%, auto);
        @include display(block);
        img {
          @include rect(100%, auto);
          @include display(block);
        }
      }
      .iteminfo {
        @include rect(100%, auto);
        @include display(block);
        h3 {
          @include ellipsis(100%, 1);
        }
        .desc {
          @include display(none);
        }
      }
    }
  }
}